
<!DOCTYPE html>
<!-- Use angular and named it seagull application -->
<html ng-app="seagull">
  <head ng-controller="IndexController">
    <title>Seagull</title>
    <meta charset="UTF-8">
    <base href="/">
    <!-- Favicon -->
    <link rel="icon" href="static/img/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="static/img/favicon.ico" type="image/x-icon" />

    <!-- Css -->
    <!-- <link rel="stylesheet" type="text/css" href="static/bower_components/bootstrap/dist/css/bootstrap.min.css"> -->
    <link rel="stylesheet" type="text/css" href="static/css/{{theme}}.bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="static/bower_components/jquery.gritter/css/jquery.gritter.css">
    <link rel="stylesheet" type="text/css" href="static/bower_components/animate.css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="static/bower_components/Hover/css/hover-min.css">
    <link rel="stylesheet" type="text/css" href="static/css/style.css">

    <!-- JavaScript -->
    <script src="static/bower_components/angular/angular.min.js"></script>
    <script src="static/bower_components/angular-route/angular-route.min.js"></script>
    <script src="static/bower_components/jquery/dist/jquery.min.js"></script>
    <script src="static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="static/bower_components/jquery.gritter/js/jquery.gritter.min.js"></script>
    <script src="static/bower_components/angular-translate/angular-translate.min.js"></script>
    <script src="static/bower_components/angular-cookies/angular-cookies.min.js"></script>
    <script src="static/bower_components/angular-translate-storage-cookie/angular-translate-storage-cookie.min.js"></script>
    <script src="static/bower_components/angular-translate-storage-local/angular-translate-storage-local.min.js"></script>
    <script src="static/js/app.js"></script>
    <script src="static/js/controllers.js"></script>
    <script src="static/js/style.js"></script>
  </head>

  <!-- The controller to change i18n language, refer to static/js/app.js -->
  <body ng-controller="IndexController" class="animated fadeIn">
    <!-- Header with a navigation bar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <!-- Home page button -->
        <div class="navbar-header">
          <a class="navbar-brand animate-nav" href="/">{{'seagull'|translate}}</a>
        </div>

        <!-- Containers page, images page and configuration page buttons -->
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="animate-nav"><a href="/containers">{{'containers'|translate}}</a></li>
            <li class="animate-nav"><a href="/images">{{'images'|translate}}</a></li>
            <li class="animate-nav"><a href="/configuration">{{'configuration'|translate}}</a></li>
            <li class="animate-nav"><a href="/dockerhub">{{'dockerhub'|translate}}</a></li>
          </ul>

          <!-- A more button to change theme -->
          <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
                    <a class="dropdown-toggle animate-nav" data-toggle="dropdown" href="">{{'theme'|translate}} <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li class="animate-nav"><a href="" ng-click="changeTheme('flatly')">{{'flatly'|translate}}</a></li>
                        <li class="animate-nav"><a href="" ng-click="changeTheme('bootstrap')">{{'bootstrap'|translate}}</a></li>
                        <li class="animate-nav"><a href="" ng-click="changeTheme('cerulean')">{{'cerulean'|translate}}</a></li>
                        <li class="animate-nav"><a href="" ng-click="changeTheme('cosmo')">{{'cosmo'|translate}}</a></li>
                        <li class="animate-nav"><a href="" ng-click="changeTheme('cyborg')">{{'cyborg'|translate}}</a></li>
                        <li class="animate-nav"><a href="" ng-click="changeTheme('darkly')">{{'darkly'|translate}}</a></li>
                        <li class="animate-nav"><a href="" ng-click="changeTheme('journal')">{{'journal'|translate}}</a></li>
                        <li class="animate-nav"><a href="" ng-click="changeTheme('lumen')">{{'lumen'|translate}}</a></li>
                        <li class="animate-nav"><a href="" ng-click="changeTheme('paper')">{{'paper'|translate}}</a></li>
                        <li class="animate-nav"><a href="" ng-click="changeTheme('readable')">{{'readable'|translate}}</a></li>
                        <li class="animate-nav"><a href="" ng-click="changeTheme('sandstone')">{{'sandstone'|translate}}</a></li>
                        <li class="animate-nav"><a href="" ng-click="changeTheme('simplex')">{{'simplex'|translate}}</a></li>
                        <li class="animate-nav"><a href="" ng-click="changeTheme('slate')">{{'slate'|translate}}</a></li>
                        <li class="animate-nav"><a href="" ng-click="changeTheme('spacelab')">{{'spacelab'|translate}}</a></li>
                        <li class="animate-nav"><a href="" ng-click="changeTheme('superhero')">{{'superhero'|translate}}</a></li>
                        <li class="animate-nav"><a href="" ng-click="changeTheme('united')">{{'united'|translate}}</a></li>
                        <li class="animate-nav"><a href="" ng-click="changeTheme('yeti')">{{'yeti'|translate}}</a></li>
                    </ul>
          </li>
          </ul>

          <!-- A more button to change i18n languages and email me -->
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <a class="dropdown-toggle animate-nav" data-toggle="dropdown" href="">{{'more'|translate}} <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li class="animate-nav" ng-hide="isEnUs()"><a href="" ng-click="changeLanguage('en-us')">{{'en_us'|translate}}</a></li>
                <li class="animate-nav" ng-hide="isZhCn()"><a href="" ng-click="changeLanguage('zh-cn')">{{'zh_cn'|translate}}</a></li>
                <li class="animate-nav" ng-hide="isZhHant()"><a href="" ng-click="changeLanguage('zh-hant')">{{'zh_hant'|translate}}</a></li>
                <li class="animate-nav" ng-hide="isDeDe()"><a href="" ng-click="changeLanguage('de-de')">{{'de_de'|translate}}</a></li>
                <li class="animate-nav" ng-hide="isFrFr()"><a href="" ng-click="changeLanguage('fr-fr')">{{'fr_fr'|translate}}</a></li>
                <li class="animate-nav" ng-hide="isSvSe()"><a href="" ng-click="changeLanguage('sv-se')">{{'sv_se'|translate}}</a></li>
                <li class="animate-nav"><a href="https://github.com/tobegit3hub/seagull/issues/new" target="_top">{{'need_help'|translate}}</a></li>
              </ul>
            </li>
          </ul>
          <!-- The menu for local and remote servers -->
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <a class="dropdown-toggle animate-nav" data-toggle="dropdown" href="">{{currentServer}} <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li ng-repeat-start="server in notCurrentServers track by $index" class="animate-nav"><a href="" ng-click="changeServer(server)">{{server}}</a></li>
                <li ng-repeat-end></li>
                <li class="animate-nav"><a href="" data-toggle="modal" data-target="#addServerModal">{{'Add Server'}}</a></li>
                <li class="animate-nav"><a href="" data-toggle="modal" data-target="#clearServersModal">{{'Clear Servers'}}</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div> <!-- End of navbar -->

    <!-- Modal to add server -->
    <div class="modal fade" id="addServerModal" tabindex="-1" role="dialog" aria-labelledby="addServerModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="addServerModalLabel">Add Remote Server</h4>
          </div>
          <div class="modal-body">
            <form role="form" >
              <div class="form-group">
                <input class="form-control" placeholder="http://96.126.127.93:2375" ng-model="newServer">
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" aria-hidden="true" ng-click="addServer(newServer)">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal to clear servers -->
    <div class="modal fade" id="clearServersModal" tabindex="-1" role="dialog" aria-labelledby="clearServersModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="clearServersModalLabel">Clear Servers</h4>
          </div>
          <div class="modal-body">
            <h4>Are you sure to clear all servers?</h4>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" aria-hidden="true" ng-click="clearServers()">Confirm</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Todo: No need to use <br/> to move content below the navigation bar -->
    <br/><br/><br/><br/>

    <!-- Angular views, more on static/js/app.js -->
    <div class="container">
      <div ng-view></div>
    </div>

    <!-- No footer -->
  </body>
</html>
